<template>
    <el-row class="content">
        <el-col :span="4"/>
        <el-col :span="16">
            <el-descriptions
                    class="margin-top"
                    title="我的个人信息"
                    :column="1"
                    size="large"
                    border
            >
                <template #extra>
                    <el-button type="primary" @click="editUser()">编辑</el-button>
                </template>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <User/>
                            </el-icon>
                            用户头像
                        </div>
                    </template>
                    <div class="demo-type">
                        <el-avatar :size="60" :src="user.avatar" @error="errorHandler">
                            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                        </el-avatar>
                    </div>

                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <price-tag/>
                            </el-icon>
                            用户名
                        </div>
                    </template>
                    {{ user.userName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>

                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <collection-tag/>
                            </el-icon>
                            昵称
                        </div>
                    </template>
                    {{ user.nickName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <coin/>
                            </el-icon>
                            用户类型
                        </div>
                    </template>
                    {{ user.userType.startsWith("1") ? "普通用户" : "管理员" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <mostly-cloudy/>
                            </el-icon>
                            邮箱
                        </div>
                    </template>
                    {{ user.email }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <iphone/>
                            </el-icon>
                            手机号
                        </div>
                    </template>
                    {{ user.phoneNumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <male/>
                            </el-icon>
                            性别
                        </div>
                    </template>
                    {{ user.sex.includes("0") ? "男" : user.sex.includes("1") ? "女" : "未知" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets/>
                            </el-icon>
                            备注
                        </div>
                    </template>
                    <el-tag size="small">{{ user.remark }}</el-tag>
                </el-descriptions-item>

            </el-descriptions>

        </el-col>
        <el-col :span="4"/>
    </el-row>

  <!--    =============弹出框===================     -->
  <!-- Form -->
    <el-dialog v-model="dialogFormVisible" title="修改个人信息">
        <el-form :model="newUser" :rules="rules" ref="ruleFormRef">
            <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
                <el-input v-model="newUser.nickName" autocomplete="off" size="large"/>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="phoneNumber">
                <el-input type="tel" v-model="newUser.phoneNumber" autocomplete="off" size="large"/>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth" prop="=email">
                <el-input type="email" v-model="newUser.email" autocomplete="off" size="large"/>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                <el-input v-model="newUser.remark" autocomplete="off" size="large"/>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="newUser.sex" class="m-2" placeholder="Select" size="large">
                    <el-option label="男" value="0"/>
                    <el-option label="女" value="1"/>
                    <el-option label="未知" value="2"/>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {getUserInfo, updateUserInfo} from "@/request/user";

name = "UserInfoView";
import {computed, reactive, ref} from 'vue'
import {
    Coin, CollectionTag,
    Iphone,
    Male, MostlyCloudy,
    PriceTag,
    Tickets,
    User
} from '@element-plus/icons-vue'

const size = ref('')

const user = ref({
    "userId": 7,
    "userName": "laoliu",
    "nickName": "老刘",
    "userType": "10",
    "email": "123@qq.com",
    "phoneNumber": "1111112345",
    "sex": "0",
    "avatar": "",
    "password": "",
    "status": "0",
    "delFlag": "0",
    "createBy": "管理员",
    "createTime": "2023-04-25T11:50:22.000+00:00",
    "updateBy": "laoliu",
    "updateTime": "2023-04-26T04:11:41.000+00:00",
    "remark": "这是备注"
});

const newUser = ref({
    nickName: "",
    phoneNumber: "",
    email: "",
    remark: "",
    sex: ""
});

const errorHandler = () => true;

const getUser = () => {
    getUserInfo().then(({data}) => {
        user.value = data.data;
    })
}

const iconStyle = computed(() => {
    const marginMap = {
        large: '8px',
        default: '6px',
        small: '4px',
    }
    return {
        marginRight: marginMap[size.value] || marginMap.default,
    }
})

const dialogFormVisible = ref(false)

const formLabelWidth = '140px'

const rules = ref({
    nickName: [
        {required: true, message: '请', trigger: 'blur'},
        {min: 3, message: 'Length should be 3 to 5', trigger: 'blur'},
    ],
    phoneNumber: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
        {
            type: 'tel',
            message: 'Please input correct email address',
            trigger: 'blur',
        },
    ],
    email: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: ['blur', 'change'],
        },
        {
            type: 'email',
            message: 'Please input correct email address',
            trigger: ['blur', 'change'],
        },
    ],
    remark: [
        {required: true, message: 'Please input activity form', trigger: 'blur'},
    ],
});

const ruleFormRef = ref();

const submitForm = async (formEl) => {
    console.log("await")
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
             updateUserInfo(newUser.value).then(({data}) => {
                console.log(data)
                 getUser();
            })
            console.log('submit!');
            dialogFormVisible.value = false;
        } else {
            console.log('error submit!', fields);
        }
    });
};

const resetForm = (formEl) => {
    dialogFormVisible.value = false;
    if (!formEl) return formEl.resetFields();
}

const editUser = () => {
    newUser.value = {
        "nickName": user.value.nickName,
        "phoneNumber": user.value.phoneNumber,
        "email": user.value.email,
        "sex": user.value.sex,
        "remark": user.value.remark,
    };
    dialogFormVisible.value = true;
}

getUser();

</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}

.content {
    margin-top: 50px;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

</style>

